<template>
    <div class="page-container">
        <div class="nav-wrapper fixed top-0 left-0 right-0 z-50">
            <header-nav class="nav" id="nav" />
        </div>
        <div class="content-wrapper">
            <div class="banner-wrapper">
                <banner-slider class="banner" />
            </div>
            <div class="about-wrapper">
                <about-us id="about-us" />
            </div>
            <div class="service-wrapper">
                <service-cards id="service-cards" />
            </div>
            <div class="recruit-wrapper">
                <driver-recruit id="driver-recruit" />
            </div>
            <div class="models-wrapper">
                <car-models id="car-models" />
            </div>
            <div class="footer-wrapper">
                <footer-nav id="contact" />
            </div>
            <div class="icp-wrapper">
                <icp-info />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import HeaderNav from './components/HeaderNav.vue'
import BannerSlider from './components/BannerSlider.vue'
import AboutUs from './components/AboutUs.vue'
import ServiceCards from './components/ServiceCards.vue'
import CarModels from './components/CarModels.vue'
import DriverRecruit from './components/DriverRecruit.vue'
import FooterNav from './components/FooterNav.vue'
import IcpInfo from './components/IcpInfo.vue'
</script>

<style>
/* 移除 scoped，使样式全局生效 */
:root body {
    overflow: auto !important;
    margin: 0;
}
</style>

<style scoped>
.page-container {
    width: 100%;
    min-height: 100vh;
    overflow-y: auto;
}

.nav-wrapper {
    height: 60px;
}

.content-wrapper { 
    padding-top: 10px; /*为固定导航栏留出空间*/
}

.banner-wrapper {
    height: 400px;
}

.about-wrapper {
    padding: 40px 0;
}

.service-wrapper {
    background-color: #fff;
}

.models-wrapper {
    background-color: #f5f5f5;
}

.recruit-wrapper {
    background-color: #333;
}

.footer-wrapper {
    background-color: #2c2c2c;
    padding: 40px 0;
}

.icp-wrapper {
    background-color: #222;
    padding: 20px 0;
}
</style>